<template>
	<view class="container">
    <mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view class="pay_code">
      <view class="account-info">
        <view class="amount">账户余额 <text>￥{{amount}}</text></view>
        <view style="margin-top: 12rpx">青铜会员 成长值：16</view>
      </view>
      <view class="bg-img"><image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/personal-bg.png"></image></view>
			<view class="code_content">
        <image class="panda-img" src="http://wx.xiongmaovip.com/miniapp/static/personal-center/panda.png" />
        <view class="bar_code">
					<img :src="barCodeImg" ref="barCode" alt="条形码">
				</view>
				<view class="bar_code_number">
					<text>{{payCodeNum}}</text>
				</view>
				<view class="QRCode">
					<img :src="qrCodeImg" id="QRCode" alt="二维码">
				</view>
				<view class="titile">
					向商家付款
				</view>
			</view>
			<view class="use-note">
				<view class="note-title">会员付款码使用说明</view>
				<view class="note-content">
					1、付款码有效期为1分钟，过期自动刷新。<br />
					2、请将以上条码展示给油站工作人员进行扫描。<br />
					3、使用以上条码付款将直接从会员账户中扣减。<br />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '@/config/index.js' // 引入环境变量
	import {
		payCode,
		randomPayCodeQr
	} from '@/api/index.js'
  import mvBar from "@/components/mysNavBar.vue";
	export default {
    components: {mvBar},
		data() {
			return {
        mysNavConfig: {
          navPadding: true,
          isHome: false,
          navFixed: true,
          navTitle: {
            text: "付款码",
            color: "#FFFFFF",
            fontSize: "34upx", // px upx rpx
            fontWeight: "500", // blod
          },
          leftIconPath: '/static/header/back.png',
        },
				param: {},
				payCodeNum: '',
				qrCodeImg: '',
				barCodeImg: '',
				amount: 0,
				refreshCode: null
			}
		},
		onLoad() {
			this.refreshCode = setInterval(this.getPayCode, 65 * 1000)
			this.getPayCode()
		},
		onUnload() {
			if (this.refreshCode) {
				clearInterval(this.refreshCode)
				this.refreshCode = null;
			}
		},
		methods: {
			getPayCode() {
				uni.showLoading({
					title: '加载中...'
				})
				payCode().then(res => {
					uni.hideLoading()
					this.payCodeNum = res.payCode
					this.amount = res.amount
					let token = uni.getStorageSync('userToken')
					// let token = 'Lwb8S5gBTs+mQUYKVMQs6g==ons6G631SMpIIG8CbASy3n7GGmQg'
					let str = token.replaceAll('#', '%23').replaceAll('+', '%2B')
					this.qrCodeImg = `${http.baseUrl}/wx/user/randomPayCodeQr/?token=${str}`
					this.barCodeImg = `${http.baseUrl}/wx/user/randomPayCodeBar/?token=${str}`
					console.log(this.payCodeNum)
					console.log(this.qrCodeImg)
					console.log(this.barCodeImg)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
  .container{
    width: 100%;
    height: 100vh;
  }
	.pay_code {
		position: fixed;
		width: 100%;
		padding: 40rpx 24rpx 0rpx 24rpx;
		min-height: 100%;
		box-sizing: border-box;
    background: #183E31;

    .account-info{
      margin-bottom: 80upx;
      color: #FFFFFF;
      font-size: 28upx;
      .amount{
        text{
          font-size: 48upx;
          font-weight: 700;
        }
      }
    }

    .bg-img{
      width: 100%;
      height: 480upx;
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
      image{
        width: 100%;
        height: 100%;
      }
    }

		.bg {
			position: absolute;
			top: 55rpx;
			z-index: -1;
			width: 702rpx;
			border-radius: 12rpx;
			margin-bottom: 40rpx;

			image {
				width: 100%;
				border-radius: 28rpx;
				// margin-top: 50rpx;
			}
		}

		.code_content {
			position: relative;
			font-size: 40rpx;
			padding: 100rpx 24rpx 36rpx 24rpx;
			border-radius: 20rpx;
			background: #FFFFFF;

      .panda-img{
        width: 270upx;
        height: 270upx;
        position: absolute;
        right: 0;
        top: -220upx;
        z-index: -1;
      }

			.bar_code {
				margin: auto;
				// width: 550rpx;
				height: 124rpx;
				// padding: 0rpx 24rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.bar_code_number {
				padding-top: 20rpx;
				text-align: center;
				font-size: 30rpx;
				color: #999999;
				line-height: 42rpx;
				letter-spacing: 24rpx;
			}

			.QRCode {
				margin: auto;
				width: 440rpx;
				height: 440rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.br {
				width: 100%;
				height: 2rpx;
				background: #EDEDED;
				margin-bottom: 36rpx;
			}

			.member_amt {
				// height: 40rpx;
				// line-height: 40rpx;
				display: flex;
				justify-content: space-between;

				// padding: 0rpx 24rpx;
				.now_account {
					font-size: 34rpx;
					color: #999999;
					line-height: 34rpx;
				}

				.amt {
					font-size: 34rpx;
					color: #333333;
					line-height: 34rpx;
					display: inline-block;
					vertical-align: middle;
				}
			}

			.left {
				position: absolute;
				width: 35%;
				height: 40rpx;
				left: 0;
				top: -24rpx;
				background: linear-gradient(-135deg, transparent 10px, #ffffff 0);
				//border-top-right-radius: 140rpx;
				border-top-left-radius: 80rpx;
			}

			.right {
				position: absolute;
				width: 35%;
				height: 40rpx;
				right: 0;
				top: -24rpx;
				background: linear-gradient(135deg, transparent 10px, #ffffff 0);
				//border-top-left-radius: 140rpx;
				border-top-right-radius: 80rpx;
			}

			.titile {
				font-size: 30rpx;
				font-weight: 500;
				color: #1B1B1B;
				line-height: 30rpx;
				position: absolute;
				top: 32rpx;
				left: 0;
				right: 0;
				text-align: center;
				margin: auto;
			}
		}

		.use-note {
			//background: #FFFFFF;
			border-radius: 16rpx;
			color: white;
			margin: 40rpx auto;
			line-height: 180%;
			padding: 34rpx 24rpx 30rpx 24rpx;

			.note-title {
				// font-weight: bold;
				font-weight: 500;
				font-size: 34rpx;
				color: #FFFFFF;
				line-height: 34rpx;
        text-align: center;
			}

			.note-content {
				margin-top: 32rpx;
				font-size: 28rpx;
				color: #999999;
				line-height: 50rpx;
			}
		}
	}
</style>